<!DOCTYPE html>
<html>

<head>
    <title>登录后创建会议</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../../static/orderscreate/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/orderscreate/css/fileinput.min.css" rel="stylesheet">
    <link href="../../static/orderscreate/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
{#    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">#}
    <link href="../../static/orderscreate/form_builder/animate.min.css" rel="stylesheet">
    <link href="../../static/orderscreate/form_builder/summernote.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="../../static/system_setup/flow_cerate/css/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="../../static/system_setup/flow_cerate/css/style.css">

    <link href="../../static/orderscreate/form_builder/style.min862f.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../../static/orderscreate/css/index.css">
    <script src="../../static/system_setup/js/jquery-1.10.2.min.js"></script>
    <script src="../../static/orderscreate/javascript/bootstrap.min.js"></script>
    <script src="../../static/orderscreate/javascript/fileinput.min.js"></script>
    <script src="../../static/orderscreate/javascript/bootstrap-datetimepicker.min.js"></script>
    <script src="../../static/orderscreate/javascript/distpicker.data.min.js"></script>
    <script src="../../static/orderscreate/javascript/distpicker.min.js"></script>
    <script src="../../static/orderscreate/javascript/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../../static/orderscreate/javascript/zh.js"></script>
    <script src="../../static/orderscreate/javascript/jquery-ui.min.js"></script>
    <script src="../../static/orderscreate/form_builder/beautifyhtml.js"></script>
    <script src="../../static/orderscreate/javascript/index.js"></script>
    <link rel="stylesheet" href="../../static/personnel/TimeSelector/skin/jedate.css">
    {#    <link rel="stylesheet" href="//at.alicdn.com/t/font_2369197_6qqmzaem9ed.css" media="screen">#}
    <style>
        html, body {
            margin: 0;padding: 0;width: 100%;height: 100%;
        }
        table {
            border-collapse: collapse;
        }
        .form-flow {
            display: inline-block;width: 100px;vertical-align: top;text-align: center;font-size: 14px;cursor: pointer;
        }
        .form-flow-add-color {
            border-bottom: #00a0e9 solid 1px;color: #00a0e9;
        }
        .li-class {
            list-style: none;margin-top: 2%;color: #0b0b0b;cursor: pointer;
        }
        tr {
            height: 35px;
        }
        th {
            text-align: center;
        }
        ul, li {
            list-style: none;
        }
        :focus {
            outline: none;
        }
        input[type=text] {
            border: 1px solid #ccc;
        }
        input[type=text]:hover, input[type=text]:focus {
            border-color: #57bc80;box-shadow: none;
        }
        .file {
            position: relative;display: inline-block;background: #D0EEFF;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;line-height: 20px;
        }
        .file input {
            position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;
        }
        .file:hover {
            background: #AADFFD;border-color: #78C3F3;color: #004974;text-decoration: none;
        }
        .my-select-box {
            position: relative;
        }
        .my-select-box .my-select-input {
            height: 24px;line-height: 24px;padding: 0 5px;background: url() right center no-repeat;padding-right: 20px !important;width: 100%;box-sizing: border-box;
        }
        .my-select-box .my-select-list {
            position: absolute;left: 0;z-index: 101;border: 1px solid #ccc;border-top: none;max-height: 120px;overflow-y: auto;display: none;background: #fff;width: 100%;box-sizing: border-box;
        }
        .my-select-box .my-select-list li {
            height: 22px;line-height: 22px;padding: 0 3px;cursor: pointer;margin-bottom: 1px
        }
        .my-select-box .my-select-list li.choosed {
            background: #ccc;color: #fff;
        }
        .my-select-box .my-select-list li:hover {
            background: #ccc;color: #fff;
        }
        #addForm1 {
            width: 800px;height: 620px;background: #F5F5F5;position: absolute;border: #dfdfdf solid 1px;margin: auto;border-radius: 3px;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 10100;
        }
        #title {
            display: flex;justify-content: space-between;box-sizing: border-box;padding: 0 10px;height: 50px;color: #0b0b0b;cursor: move;width: 100%;background: #f4f7fa;border-top-left-radius: 5px;border-top-right-radius: 5px;
        }
        .label_title {
            width: 15%;height: 35px;line-height: 35px;padding-right: 1%;border: #CCCCCC solid 0.5px;text-align: right;
        }
        .label_title1 {
            width: 15%;height: 35px;line-height: 35px;padding-right: 1%;border: #CCCCCC solid 0.5px;text-align: right;
        }
        .label_value {
            width: 35%;height: 35px;line-height: 35px;border: #CCCCCC solid 0.5px;
        }
        .label_value1 {
            width: 35%;height: 35px;line-height: 35px;border: #CCCCCC solid 0.5px;
        }
        .wrap-td{
            display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;word-break: break-all;text-overflow: ellipsis;
        }
        #addForm {
            width: 800px;height: 620px;background: #F5F5F5;position: absolute;border: #dfdfdf solid 1px;margin: auto;border-radius: 3px;top: 50%;left: 50%;transform: translate(-50%, -50%);display: none;z-index: 10100;font-size: 0;
        }
        #title3 {
            display: flex;justify-content: space-between;box-sizing: border-box;padding: 0 10px;height: 50px;color: #0b0b0b;cursor: move;width: 100%;background: #f4f7fa;border-top-left-radius: 5px;border-top-right-radius: 5px;
        }
        .search3 {
            width: 300px;display: flex;float: right;margin: 10px 0;margin-right: 1%;
        }

        .search3 input {
            vertical-align: middle;float: left;flex: 4;height: 30px;width: 230px;outline: none;border: 1px solid #0070c1;box-sizing: border-box;border-bottom-left-radius: 3px;border-top-left-radius: 3px;
        }
        .search3 button {
            float: right;flex: 1;height: 30px;width: 70px;line-height: 30px;background-color: #0070c1;color: white;border-style: none;outline: none;border-bottom-right-radius: 3px;border-top-right-radius: 3px;
        }
        .search3 button i {
            font-style: normal;
        }
        .search3 button:hover {
            font-size: 16px;
        }
        .li-class {
            list-style: none;margin-top: 2%;color: #0b0b0b;cursor: pointer;height: 30px;line-height: 30px;
        }
        #ThreeNavigation div {
            padding-left: 2%;
        }
    </style>
</head>

<body style="background-color:#f7f5f6;">
<div style="width: 100%;height: 40px;line-height: 40px;border-bottom: #cfcfcf solid 1px;">
    <div id="form-tab" onclick="label_switching('form_design', 'flow_design', 'form-tab', 'flow-tab')"
         class="form-flow form-flow-add-color">创建申请
    </div>
    <div id="flow-tab" onclick="label_switching('flow_design', 'form_design', 'flow-tab', 'form-tab')"
         class="form-flow">查看流程
    </div>
    <button type="submit" class="btn1" data-clipboard-text="testing" id="pop_page"
            style="float: right;height: 30px;margin-top: 5px;margin-right: 10px;background: #00a0e9;color: white;line-height: 10px;width: 70px;border: #00a0e9 solid 1px;border-radius: 3px"
            onclick="submit_data()">提交
    </button>
</div>

<div id="form_design" class="container-fluid" style="padding:0; margin:0;">
    {% autoescape off %}{{ data.business_html }}{% endautoescape %}
</div>

<div id="flow_design" class="container-fluid" style="padding:0; margin:0;display: none;">
    <div class="row-fluid clearfix">
        <div class="col-md-12 column">
            <div style="width:1080px; margin:0 auto; margin-top:20px;">
                <div class="conference-cont" style="height: 640px;">
                    <div>
                        <div class="row" style="border-left: 2px dashed rgba(0,0,0,0.12);border-right: 2px dashed rgba(0,0,0,0.12);border-bottom: 2px dashed rgba(0,0,0,0.12);">
                            <div class="container device" style="width: 100%;padding: 0;margin: 0;">
                                <div id="deviceRight" style="height: 100%;width: 100%;">
                                    <div id="main">
                                        {% autoescape off %}{{ data.process_html }}{% endautoescape %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript" src="../../static/system_setup/flow_cerate/js/jquery.jsPlumb.min.js"></script>
<script type="text/javascript" src="../../static/system_setup/flow_cerate/js/index.js"></script>
<script type="text/javascript" src="../../static/personnel/TimeSelector/src/jedate.js"></script>

<script>
    window.onload = function () {
        var label_value_list = document.getElementsByClassName("label_value");
        for (var lable=0; lable<label_value_list.length; lable++) {
            label_value_list[lable].contentEditable=true;
        }
        var label_title_list = document.getElementsByClassName("label_title");
        for (var lable1=0; lable1<label_title_list.length; lable1++) {
            label_title_list[lable1].contentEditable=false;
        }
    }
    //时间初始化
    $('.col-sm-3').css('display', 'none')
    $(".form_datetime").datetimepicker({
        language: 'zh-CN', //日期
        format: "yyyy-mm-dd",
        initialDate: new Date(), //初始化当前日期
        autoclose: true, //选中自动关闭
        todayBtn: true //显示今日按钮
    });

    var uuid = "{{ uuid | safe }}"
    function label_switching(tab_1, tab_2, id_1, id_2) {
            document.getElementById(id_1).className='form-flow form-flow-add-color';
            document.getElementById(id_2).className='form-flow';
            document.getElementById(tab_1).style.display='block';
            document.getElementById(tab_2).style.display='none';
        }
    function fill_val(){
        return false
    }
    function upload_accessory(file_type, tbody_id, accessory_type) {
            var form = new FormData();
            var files = document.getElementById(accessory_type).files[0];
            form.append(file_type, files);
            form.append('number', uuid)
            form.append('source', 'zdy')

            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/administrative/topics_attachments_upload", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        creat_table(JsonDate, tbody_id)
                    }
                }
            };


        }

        // 创建附件列表
    function creat_table(JsonData, tbody_id) {
            var t_table = document.getElementById(tbody_id);
            var local_host = window.location.host;
            if (Array.isArray(JsonData["pdf_path"])){
                for (var i=0; i<JsonData["pdf_path"].length; i++){
                    var tr = document.createElement("tr");
                    var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");var td4 = document.createElement("td");var td5 = document.createElement("td");var td6 = document.createElement("td");
                    td1.innerHTML = t_table.children.length-1;td1.style.textAlign = "center";td1.style.border="#cccccc solid 1px";td1.style.borderTop="none";
                    td2.innerHTML = JsonData["file_name"];td2.style.paddingLeft = "1%";td2.style.border="#cccccc solid 1px";td2.style.borderLeft="none";td2.style.borderTop="none";
                    td3.innerHTML = JsonData["file_size"];td3.style.textAlign = "center";td3.style.border="#cccccc solid 1px";td3.style.borderLeft="none";td3.style.borderTop="none";
                    td4.innerHTML = JsonData["upload_time"];td4.style.textAlign = "center";td4.style.border="#cccccc solid 1px";td4.style.borderLeft="none";td4.style.borderTop="none";
                    td5.innerHTML = JsonData["uploader"];td5.style.textAlign = "center";td5.style.border="#cccccc solid 1px";td5.style.borderLeft="none";td5.style.borderTop="none";
                    td6.innerHTML = "<a target='_blank' href='"+JsonData["pdf_path"][i]["pdf_path"] + "'>查看</a> | <a style='color: red;' href='#' onclick='RemoveTr(this, \""+tbody_id+"\", \""+JsonData["pdf_path"][i]["id"]+"\")'>删除</a>";td6.style.textAlign = "center";td6.style.border="#cccccc solid 1px";td6.style.borderLeft="none";td6.style.borderTop="none";
                    tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(td5);tr.appendChild(td6);
                    t_table.appendChild(tr);
                }
                if (JsonData["pdf_path"].length > 1){
                    document.getElementById("del_adjunct").style.display='block';
                }
            }else {
                tr = document.createElement("tr");
                td1 = document.createElement("td");td2 = document.createElement("td");td3 = document.createElement("td");td4 = document.createElement("td");td5 = document.createElement("td");td6 = document.createElement("td");
                td1.innerHTML = t_table.children.length-1;td1.style.textAlign = "center";td1.style.border="#cccccc solid 1px";td1.style.borderTop="none";
                td2.innerHTML = JsonData["file_name"];td2.style.paddingLeft = "1%";td2.style.border="#cccccc solid 1px";td2.style.borderLeft="none";td2.style.borderTop="none";
                td3.innerHTML = JsonData["file_size"];td3.style.textAlign = "center";td3.style.border="#cccccc solid 1px";td3.style.borderLeft="none";td3.style.borderTop="none";
                td4.innerHTML = JsonData["upload_time"];td4.style.textAlign = "center";td4.style.border="#cccccc solid 1px";td4.style.borderLeft="none";td4.style.borderTop="none";
                td5.innerHTML = JsonData["uploader"];td5.style.textAlign = "center";td5.style.border="#cccccc solid 1px";td5.style.borderLeft="none";td5.style.borderTop="none";
                td6.innerHTML = "<a target='_blank' href='"+JsonData["pdf_path"] + "'>查看</a> | <a style='color: red;' href='#' onclick='RemoveTr(this, \""+tbody_id+"\", \""+JsonData["id"]+"\")'>删除</a>";td6.style.textAlign = "center";td6.style.border="#cccccc solid 1px";td6.style.borderLeft="none";td6.style.borderTop="none";
                tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(td5);tr.appendChild(td6);
                t_table.appendChild(tr);
            }
        }


        // 获取申请页数据
    function submit_data() {
        var Jsondata = document.getElementById('form_design').innerHTML;
        var id = String({{ data.id }})
        var xhr = new XMLHttpRequest();
        var local_host = window.location.host;          // 获取当前IP
        xhr.open('post', "/system-setup/low_code_bill_view", true);
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send('data_html='+JSON.stringify(Jsondata)+"&customer_form_id="+id+"&fj_number="+String(uuid))
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    alert("提交成功！")
                    window.parent.location.reload()
                }
            }
        }
    }

    function RemoveTr(_this, tbody_id, wj_id) {
        var table = document.getElementById(tbody_id);
        var trNode = $(_this).parent().parent();
        trNode.remove();

        for (var i=0; i<table.children.length; i++){
            table.children[i].children[0].innerHTML=i+1;
        }

        var xhr = new XMLHttpRequest();
        var local_host = window.location.host;          // 获取当前IP
        xhr.open('post', "/administrative/delete_attachments_view", true);
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send("id="+String(wj_id));
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    document.getElementById("loading").style.display = "none";
                    var JsonDate = JSON.parse(xhr.responseText);
                    console.log(JsonDate);
                    alert("删除成功！")
                }
            }
        };
    }
</script>
</body>

</html>
